<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" 
		content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Templated Widgets Tests</title>

	<!-- DOH test for the dojox/mobile widgets which support templatization:
		 Button, CheckBox, Heading, ListItem, RadioButton, Slider, 
		 Switch, ToggleButton, and View. -->
	
	<script type="text/javascript" src="../../../deviceTheme.js"></script>
	<script type="text/javascript" src="../../../../../dojo/dojo.js" 
		data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>

	<script type="text/javascript">
		// Templates
		
		// Without widgets (pure HTML); with attach point for label node.
		var templateListItem1 = // pure HTML
			"<div>A template." +
			"  <div data-dojo-attach-point=\'labelNode\'></div>" +
			"</div>";
		
		// With widgets; with attach point for labelNode.
		var templateListItem2 = 
			"<div>" +
			"  <div data-dojo-type='dojox/mobile/RoundRect'>" +
			"    A template." +
			"    <div data-dojo-attach-point='labelNode'></div>" +
			"  </div>" +
			"</div>";
			
		// With widgets; without attach point for labelNode.
		var templateListItem3 = 
			"<div>" +
			"  <div data-dojo-type='dojox/mobile/RoundRect'>" +
			"    A template." +
			"  </div>" +
			"</div>";
			
		var templateHeading1 =
			"<div class='mblHeading mblHeadingCenterTitle'>" +
			"  <span data-dojo-type='dojox/mobile/ToolBarButton'" +
			"    data-dojo-attach-point='backButton'" +
			"    data-dojo-props='arrow: \"left\", back: true, transitionDir: -1'>" +
			"  </span>" +
			"  <ul data-dojo-type='dojox/mobile/TabBar'" +
			"    style='float:right;'" +
			"    data-dojo-props='barType:\"segmentedControl\", selectOne:false'>" +
			"    <li data-dojo-type='dojox/mobile/TabBarButton'" +
			"      data-dojo-props='icon:\"mblDomButtonWhiteUpArrow\"'></li>" +
			"    <li data-dojo-type='dojox/mobile/TabBarButton'" +
			"      data-dojo-props='icon:\"mblDomButtonWhiteDownArrow\"'></li>" +
			"  </ul>" +
			"  <span class='mblHeadingSpanTitle'" +
			"    data-dojo-attach-point='labelNode'>" +
			"  </span>" +
			"  <div class='mblHeadingDivTitle'" +
			"    data-dojo-attach-point='labelDivNode'>" +
			"  </div>" +
			"</div>";
			
		var templateSlider1 =
		"<div class='mblSlider mblSliderH' tabindex='0'" +
		"  aria-valuenow='${value}'" +
		"  data-dojo-attach-point='focusNode'>" +
		"  <input data-dojo-attach-point='valueNode'" +
		"    type='hidden' value='${value}'>" +
		"  <div data-dojo-attach-point='relativeParent'" +
		"    style='position: relative; height: 100%; width: 100%;'>" +
		"    <div data-dojo-attach-point='progressBar'" +
		"      style='position: absolute; left: 0px; width: 100%;'" +
		"      class='mblSliderProgressBar mblSliderTransition'>" +
		"    </div>" +
		"    <div data-dojo-attach-point='touchBox'" +
		"      style='position: absolute;' class='mblSliderTouchBox'>" +
		"    </div>" +
		"    <div data-dojo-attach-point='handle'" +
		"      style='position: absolute; left: 100%;'" +
		"      class='mblSliderHandle mblSliderTransition'>" +
		"    </div>" +
		"  </div>" +
		"</div>";
			
		var templateButton1 =
			"<button class='${baseClass}' data-dojo-attach-point='containerNode'></button>";
		
		var templateToggleButton1 =
			"<span>" +
			"	<button class='${baseClass}' tabindex='0'" +
			"		style='-webkit-user-select: none;' aria-pressed='true'" +
			"		data-dojo-attach-point='containerNode'>" +
			"	</button>" +
			"</span>";
		
		var templateCheckBox1 = 
			"<input type='checkbox'" +
			"  class='mblCheckBox mblCheckBoxChecked' value='${value}' tabindex='0'" +
			"  style='-webkit-user-select: none;' aria-checked='true'>";
		
		var templateRadioButton1 =
			"<input type='radio' value='Small' class='mblRadioButton mblRadioButtonChecked'" + 
			"	tabindex='0' style='-webkit-user-select: none;' aria-checked='true'>";
		
		var templateSwitch1 =
			"<span class='mblSwitch mblSwDefaultShape mblSwitchOn' tabindex='0' >" +
			"	<div class='mblSwitchInner' data-dojo-attach-point='inner'>" +
			"		<div class='mblSwitchBg mblSwitchBgLeft'" +
			"			data-dojo-attach-point='left'>" +
			"			<div class='mblSwitchText mblSwitchTextLeft'>ON</div>" +
			"		</div>" +
			"		<div class='mblSwitchBg mblSwitchBgRight' style='display: none;'" +
			"			data-dojo-attach-point='right'>" +
			"			<div class='mblSwitchText mblSwitchTextRight'>OFF</div>" +
			"		</div>" +
			"		<div class='mblSwitchKnob' data-dojo-attach-point='knob'></div>" +
			"		<input type='hidden' value='on' data-dojo-attach-point='input'>" +
			"	</div>" +
			"</span>";
			
		var templateView1 =
			"<div>" +
			"	<div data-dojo-type='dojox/mobile/Heading'" +
			"		data-dojo-props='label: \"Templated View\"'>" +
			"	</div>" +
			"	<div data-dojo-attach-point='myAttachPoint'>" +
			"${myProp}" + // no indentation here such that we can test by comparing the
			"</div>" +    // innerHTML of the attach point with the value of myProp 
			"	<ul data-dojo-type='dojox/mobile/RoundRectList'>" +
			"		<li data-dojo-type='dojox/mobile/ListItem'>" +
			"			Apple" +
			"		</li>" +
			"		<li data-dojo-type='dojox/mobile/ListItem'>" +
			"			Banana" +
			"		</li>";
			"	</ul>" +
			"</div>";
		
		// Templated widget classes
		var TemplatedListItem1, TemplatedWithWidgetsListItem1, 
			TemplatedWithWidgetsHeading1, TemplatedSwitch, TemplatedView1;
		
		require([
			"dojo/ready",
			"dojo/dom",
			"dojo/dom-class",
			"dojo/sniff",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojo/_base/declare",
			"dojo/dom-construct",
			"doh/runner",
			"dijit/_TemplatedMixin",
			"dijit/_WidgetsInTemplateMixin", 
			"dojox/mobile/ListItem",
			"dojox/mobile/Heading",
			"dojox/mobile/Switch",
			"dojox/mobile/View",
			"dojox/mobile/Button",
			"dojox/mobile/TabBar",
			"dojox/mobile/TabBarButton",
			"dojox/mobile/CheckBox",
			"dojox/mobile/ToggleButton",
			"dojox/mobile/RadioButton",
			"dojox/mobile/Slider",
			"dojox/mobile/RoundRect",
			"dojox/mobile/RoundRectList",
			"dojox/mobile/ScrollableView"
		], function(ready, dom, domClass, has, registry, parser, mobile, compat, declare, domConstruct,
					runner, TemplatedMixin, WidgetsInTemplateMixin, 
					ListItem, Heading, Switch, View){

		// 2.1 Without widgets (pure HTML); with attach point for labelNode and label property specified
		TemplatedListItem1 = declare(
			[ListItem, TemplatedMixin], {
				label: "Some label",
				templateString: templateListItem1 
			}
		);
		
		// 2.2 With widgets; with attach point for labelNode but no label property specified
		TemplatedWithWidgetsListItem1 = declare( 
			[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
				templateString: templateListItem2 
			}
		);
		
		// 2.3 With widgets; without attach point for labelNode and no label property specified
		TemplatedWithWidgetsListItem2 = declare( 
			[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
				templateString: templateListItem3 
			}
		);
		
		// 2.4 With widgets; without attach point for labelNode but label property specified
		// (error case)
		TemplatedWithWidgetsListItem3 = declare( 
			[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
				label: "Some label",
				templateString: templateListItem3 
			}
		);
		
		TemplatedWithWidgetsHeading1 = declare( 
			[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
				templateString: templateHeading1
			}
		);
		
		TemplatedWithWidgetsHeading2 = declare( 
			[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
				back:"Back",
				label: "Templated by: <code>Heading2.html</code> (using declare)",
				templateString: templateHeading1
			}
		);
		
		TemplatedSwitch = declare( 
			[Switch, TemplatedMixin], {
				templateString: templateSwitch1
			}
		);
		
		TemplatedView1 = declare( 
			[View, TemplatedMixin, WidgetsInTemplateMixin], {
				myProp: "myValue",
				templateString: templateView1
			}
		);
		
		ready(function(){
			runner.register("dojox.mobile.test.doh.TemplatedWidgetsTests", [
				function testTemplatedListItem(){
					// 1. Using markup 
					
					// 1.1 With attach point for labelNode and label property specified
					var listItem = registry.byId("listItem1");
					runner.assertTrue(!!listItem.domNode);
					runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
					runner.assertEqual("Some label", listItem.label);
					runner.assertTrue(!!listItem.labelNode, "1.1 labelNode");
					runner.assertEqual("Some label", listItem.labelNode.innerHTML, "1.1 labelNode.innerHTML");
					
					// 1.2 With attach point for labelNode but no label property specified
					listItem = registry.byId("listItem2");
					runner.assertTrue(!!listItem.domNode);
					runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
					runner.assertFalse(!!listItem.label, "1.2 label");
					runner.assertTrue(!!listItem.labelNode, "1.2 labelNode");
					
					// 1.3 Without attach point for labelNode and no label property specified
					listItem = registry.byId("listItem3");
					runner.assertTrue(!!listItem.domNode);
					runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
					runner.assertFalse(!!listItem.label, "1.2 label");
					runner.assertFalse(!!listItem.labelNode, "1.2 labelNode");
					
					// 2. Using declare
					
					// 2.1 With attach point for labelNode and label property specified
					listItem = registry.byId("listItem4");
					runner.assertTrue(!!listItem.domNode);
					runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
					runner.assertEqual("Some label", listItem.label);
					runner.assertTrue(!!listItem.labelNode);
					runner.assertEqual("Some label", listItem.labelNode.innerHTML, "2.1 labelNode.innerHTML");
										
					// 2.2 With attach point for labelNode but no label property specified
					listItem = registry.byId("listItem5");
					runner.assertTrue(!!listItem.domNode);
					runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
					runner.assertFalse(!!listItem.label, "2.2 label");
					runner.assertTrue(!!listItem.labelNode, "2.2 labelNode");
					
					// 2.3 Without attach point for labelNode and no label property specified
					listItem = registry.byId("listItem6");
					runner.assertTrue(!!listItem.domNode);
					runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
					runner.assertFalse(!!listItem.label, "2.3 label");
					runner.assertFalse(!!listItem.labelNode, "2.3 labelNode");

					// 2.4 Without attach point for labelNode but label property specified
					// (error case)
					try{
						new TemplatedWithWidgetsListItem3({
								label: "Some label"
						});
						runner.assertTrue(false, 
							"Creating a templated ListItem without attach point for labelNode " +
							"should throw Error if label property is set");
					}catch(err){
						// error as expected
					} 
				},
				function testTemplatedHeading(){
					// 3. Using markup 
					
					// 3.1 With back specified and no attach point
					var heading = registry.byId("heading1");
					runner.assertTrue(!!heading.domNode);
					runner.assertTrue(domClass.contains(heading.domNode, "mblHeading"));
					runner.assertFalse(!!heading.label);
					runner.assertFalse(!!heading.labelNode);
					runner.assertFalse(!!heading.labelDivNode);
					runner.assertTrue(!!heading.backButton, "3.1 backButton");
					runner.assertEqual("Back", heading.backButton.label, "1.1 backButton.label");
					
					// 3.2 With attach points; back and label specified
					heading = registry.byId("heading2");
					runner.assertTrue(!!heading.domNode, "heading2.domNode");
					runner.assertTrue(domClass.contains(heading.domNode, "mblHeading"));
					runner.assertEqual("Some label", heading.label);
					runner.assertTrue(!!heading.labelNode);
					runner.assertTrue(!!heading.labelDivNode);
					runner.assertEqual("Some label", heading.labelNode.innerHTML);
					runner.assertTrue(!!heading.backButton, "3.2 backButton");
					runner.assertEqual("Back", heading.backButton.label, "1.1 backButton.label");
					
					// 3.3 Without attach point for backButton but back property specified
					// (error case)
					try{
						new TemplatedWithWidgetsHeading1({
								back: "Back"
						});
						runner.assertTrue(false, 
							"Creating a templated Heading without attach point for backButton " +
							"should throw Error if back property is set");
					}catch(err){
						// error as expected
					} 
					
					// 3.4 Without attach point for labelNode but label property specified
					// (error case)
					try{
						new TemplatedWithWidgetsHeading1({
								label: "Some label"
						});
						runner.assertTrue(false, 
							"Creating a templated Heading without attach point for labelNode " +
							"should throw Error if label property is set");
					}catch(err){
						// error as expected
					} 
				},
				function testTemplatedFormControls(){
					// Button
					var widget = registry.byId("button1");
					runner.assertTrue(!!widget.domNode);
					runner.assertTrue(domClass.contains(widget.domNode, "mblButton"));
					
					// Slider
					widget = registry.byId("slider1");
					runner.assertTrue(!!widget.domNode);
					runner.assertTrue(domClass.contains(widget.domNode, "mblSlider"));
					runner.assertTrue(!!widget.focusNode);
					runner.assertTrue(!!widget.valueNode);
					runner.assertTrue(!!widget.relativeParent);
					runner.assertTrue(!!widget.progressBar);
					runner.assertTrue(!!widget.touchBox);
					runner.assertTrue(!!widget.handle);
					
					// CheckBox
					widget = registry.byId("checkbox1");
					runner.assertTrue(!!widget.domNode);
					runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
						"mblCheckableInputContainer" : "mblCheckBox"));
					
					// ToggleButton
					widget = registry.byId("togglebutton1");
					runner.assertTrue(!!widget.domNode);
					runner.assertTrue(domClass.contains(widget.domNode, "mblToggleButton"));
					
					// Switch
					widget = registry.byId("switch1");
					runner.assertTrue(!!widget.domNode);
					runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
						"mblSwitchContainer" : "mblSwitch"));
					runner.assertTrue(!!widget.inner);
					runner.assertTrue(!!widget.left);
					runner.assertTrue(!!widget.right);
					runner.assertTrue(!!widget.knob);
					runner.assertTrue(!!widget.input);
					runner.assertTrue(domClass.contains(widget.inner, "mblSwitchInner"));
					runner.assertTrue(domClass.contains(widget.left, "mblSwitchBg"));
					runner.assertTrue(domClass.contains(widget.left, "mblSwitchBgLeft"));
					runner.assertTrue(domClass.contains(widget.right, "mblSwitchBg"));
					runner.assertTrue(domClass.contains(widget.right, "mblSwitchBgRight"));
					runner.assertTrue(domClass.contains(widget.knob, "mblSwitchKnob"));
					
					widget = registry.byId("switch2"); // using declare
					runner.assertTrue(!!widget.domNode);
					runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
						"mblSwitchContainer" : "mblSwitch"));
					runner.assertTrue(!!widget.inner);
					runner.assertTrue(!!widget.left);
					runner.assertTrue(!!widget.right);
					runner.assertTrue(!!widget.knob);
					runner.assertTrue(!!widget.input);
					runner.assertTrue(domClass.contains(widget.inner, "mblSwitchInner"));
					runner.assertTrue(domClass.contains(widget.left, "mblSwitchBg"));
					runner.assertTrue(domClass.contains(widget.left, "mblSwitchBgLeft"));
					runner.assertTrue(domClass.contains(widget.right, "mblSwitchBg"));
					runner.assertTrue(domClass.contains(widget.right, "mblSwitchBgRight"));
					runner.assertTrue(domClass.contains(widget.knob, "mblSwitchKnob"));
					
					// RadioButton
					widget = registry.byId("rb1"); // using declare
					runner.assertTrue(!!widget.domNode);
					runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
						"mblCheckableInputContainer" : "mblRadioButton"));
				},
				function testTemplatedView(){
					var view = registry.byId("view1");
					runner.assertTrue(!!view.domNode);
					runner.assertTrue(domClass.contains(view.domNode, "mblView"));
					runner.assertTrue(!!view.myAttachPoint);
					runner.assertTrue(!!view.myAttachPoint.innerHTML);
					runner.assertEqual("myValue", view.myAttachPoint.innerHTML, "view.myAttachPoint.innerHTML");
				}
				]);
				runner.run();
			});
		})
	</script>
	
	<style type="text/css">
		html,body{
			height: 100%;
		}
		.mblRoundRect {
			margin-left: 32px;
			margin-right: 32px;
		}
		.bold {
			font-weight: bold;
		}
	</style>
</head>

<body>
	<div id="main" data-dojo-type="dojox/mobile/View">
		<!-- Templated ListItem -->
		<div id="ListItem" data-dojo-type="dojox/mobile/ScrollableView">
			<ul id="list" data-dojo-type="dojox/mobile/RoundRectList" 
				data-dojo-props="variableHeight: true">
				
				<!-- Templated ListItem -->
				
				<!-- 1. In markup -->
				<!-- 1.1 With attach point for labelNode and label property specified -->
				<li id="listItem1" data-dojo-type="dojox/mobile/ListItem"
					data-dojo-mixins="dijit/_TemplatedMixin"
					data-dojo-props="label:'Some label', 
						templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'">
				</li>
				<!-- 1.2 With attach point for labelNode but no label property specified -->
				<li id="listItem2" data-dojo-type="dojox/mobile/ListItem"
					data-dojo-mixins="dijit/_TemplatedMixin"
					data-dojo-props="templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'">
				</li>
				<!-- 1.3 Without attach point for labelNode and no label property specified -->
				<li id="listItem3" data-dojo-type="dojox/mobile/ListItem"
					data-dojo-mixins="dijit/_TemplatedMixin"
					data-dojo-props="templateString: '<div><div>My inline, multiline <i>HTML</i><br>template (markup)</div></div>'">
				</li>
				
				<!-- 2. In markup using classes created with declare -->
				<!-- 2.1 Without widgets (pure HTML); with attach point for labelNode and label property specified -->
				<li id="listItem4" data-dojo-type=TemplatedListItem1>
				</li>
				<!-- 2.2 With widgets; with attach point for labelNode but no label property specified -->
				<li id="listItem5" data-dojo-type=TemplatedWithWidgetsListItem1>
				</li>
				<!-- 2.3 Without attach point for labelNode and no label property specified -->
				<li id="listItem6" data-dojo-type=TemplatedWithWidgetsListItem2>
				</li>
				
				<!-- Templated Heading -->
				<!-- 3.1 With back specified and no attach point -->
				<div id="heading1" data-dojo-type="dojox/mobile/Heading" 
					data-dojo-props="back:'Back', 
						templateString: '<div>My inline <i>HTML</i> template (markup)</div>'"
					data-dojo-mixins="dijit/_TemplatedMixin">
				</div>
				<!-- 3.2 With attach points; back and label specified -->
				<div id="heading2" data-dojo-type=TemplatedWithWidgetsHeading1 
					data-dojo-props="back:'Back', label: 'Some label'">
				</div>
				
				<!-- Templated Button -->
				<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
				<table style="width:100%">
					<tr>
					<td><span class="bold">Button</span></td>
					<td style="text-align:right">
						<button id="button1" data-dojo-type="dojox/mobile/Button" 
							data-dojo-props="templateString: templateButton1"
							data-dojo-mixins="dijit/_TemplatedMixin">
							Press me!
						</button>
					</td>
					</tr>
				</table>
				</div>
				
				<!-- Templated Slider -->
				<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
				<table style="width:100%">
					<tr>
					<td><span class="bold">Slider</span></td>
					<td style="float:right">
						<input id="slider1" data-dojo-type="dojox/mobile/Slider"
							style="width:200px;" type="range"
							data-dojo-props="templateString: templateSlider1, 
								value:10, min:0, max:40, step:0.1"
							data-dojo-mixins="dijit/_TemplatedMixin">
					</td>
					</tr>
				</table>
				</div>
				
				<!-- Templated CheckBox -->
				<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
				<table style="width:100%">
					<tr>
					<td><span class="bold">CheckBox</span></td>
					<td style="text-align:right">
						<label for="checkbox1">Click me</label>
						<input type="checkbox" id="checkbox1"
							data-dojo-type="dojox/mobile/CheckBox"
							data-dojo-props="templateString: templateCheckBox1">
					</td>
					</tr>
				</table>
				</div>
				
				<!-- Templated ToggleButton -->
				<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
				<table style="width:100%">
					<tr>
					<td><span class="bold">ToggleButton</span></td>
					<td style="text-align:right">
						<button id="togglebutton1" data-dojo-type="dojox/mobile/ToggleButton"
							data-dojo-props="templateString: templateToggleButton1">
								Toggle me
						</button>
					</td>
					</tr>
				</table>
				</div>
				
				<!-- Templated Switch -->
				<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
				<table style="width:100%">
					<tr>
					<td><span class="bold">Switch</span></td>
					<td style="text-align:right">
						<input id="switch1" type="checkbox" value="on"
							data-dojo-type="dojox/mobile/Switch"
							data-dojo-props="templateString: templateSwitch1"
							data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
					</td>
					<td style="text-align:right">
						<input id="switch2" type="checkbox" value="on"
							data-dojo-type=TemplatedSwitch>
					</td>
					</tr>
				</table>
				</div>
				
				<!-- Templated RadioButton -->
				<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
				<table style="width:100%">
					<tr>
					<td><span class="bold">Radio Button</span></td>
					<td style="text-align:right">
						<input type="radio" id="rb1" data-dojo-type="dojox/mobile/RadioButton" 
							data-dojo-props="templateString: templateRadioButton1"
							name="mobileRadio" value="Large" checked>
						<label for="rb1">1</label>
						
						<input type="radio" id="rb2" data-dojo-type="dojox/mobile/RadioButton" 
							data-dojo-props="templateString: templateRadioButton1"
							name="mobileRadio" value="Large">
						<label for="rb2">2</label>
						
						<input type="radio" id="rb3" data-dojo-type="dojox/mobile/RadioButton" 
							data-dojo-props="templateString: templateRadioButton1"
							name="mobileRadio" value="Large">
						<label for="rb3">3</label>
					</tr>
				</table>
				</div>
			</ul>
		</div>
	
		<!-- Templated View -->
		<div id="view1" data-dojo-type=TemplatedView1>
		</div>
	</div>

</body>
</html>
